<template>
  <div v-if="total>0">
    <ul class="pagination">
      <li :class="{'disabled': current === 1|| grouplist.length<2}">
        <a href="javascript:;" @click="setCurrent(currentPage - 1)">上一页</a>
      </li>
      <li :class="{'disabled': current == 1}">
        <a href="javascript:;" @click="setCurrent(1)"> 首页 </a>
      </li>
      <li>
        <a href="javascript:;" v-for="(p,index) in grouplist" :class="{'active': current == p.val}" :key="index" @click="setCurrent(p.val)"> {{ p.text }} </a>
      </li>
      <li :class="{'disabled': current == page}">
        <a href="javascript:;" @click="setCurrent(page)"> 尾页 </a>
      </li>
      <li :class="{'disabled': current == page|| grouplist.length<2}">
        <a href="javascript:;" @click="setCurrent(current + 1)">下一页</a>
      </li>
      <li :class="{'disabled': isInner|| grouplist.length<2}">
        到<input type="text" v-model="inputVal" @keyup.enter="submit(inputVal)">页
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      current: this.currentPage,
      inputVal: '',
      isInner: false
    }
  },
  props: {
    total: {// 数据总条数
      type: Number,
      default: 0
    },
    display: {// 每页显示条数
      type: Number,
      default: 15
    },
    currentPage: {// 当前页码
      type: Number,
      default: 1
    },
    pagegroup: {// 分页数组里面显示的页码数量
      type: Number,
      default: 5,
      coerce: function (v) {
        v = v > 0 ? v : 5
        return v % 2 === 1 ? v : v + 1
      }
    },
    isLink: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    currentPage () {
      this.current = this.currentPage
    }
  },
  computed: {
    page: function () { // 总页数
      return Math.ceil(this.total / this.display)
    },
    grouplist: function () { // 计算分页页码
      let len = this.page // 总页数  6
      let temp = [] // 页码少，不需要加...时的页码数组
      let list = [] // 加...时的页码数组
      let count = Math.floor(this.pagegroup / 2) // 页码数量中值 6/2
      let center = this.currentPage // 当前页码
      console.log(center)
      // 不需要加...时
      if (len <= this.pagegroup) {
        while (len--) {
          temp.push({ text: this.page - len, val: this.page - len })
        }
        return temp
      }
      // 需要加...时
      while (len--) {
        temp.push(this.page - len) // [ 5, 4, 3, 2, 1]
      }
      var idx = temp.indexOf(center);
      (idx < count) && (center = center + count - idx); // 1->3 2->3
      (this.currentPage > this.page - count) && (center = this.page - count) // 4->3 5->3 6->3
      temp = temp.splice(center - count - 1, this.pagegroup)
      do {
        var t = temp.shift()
        list.push({
          text: t,
          val: t
        })
      } while (temp.length)
      if (this.page > this.pagegroup) {
        (this.currentPage > count + 1) && list.unshift({ text: '...', val: list[0].val - 1 });
        (this.currentPage < this.page - count) && list.push({ text: '...', val: list[list.length - 1].val + 1 })
      }
      return list
    }
  },
  methods: {
    setCurrent (idx) {
      console.log(idx)
      this.isInner = false
      this.inputVal = ''
      if (idx === 0) {
        idx++
      }
      if (this.current !== idx && idx > 0 && idx < this.page + 1) {
        this.current = idx
        this.$emit('pagechange', this.current)
      }
    },
    submit (val) {
      console.log(11111)
      console.log(val)
      let num = Number(val)
      let arr = []
      for (let i = 0; i <= this.page; i++) {
        arr.push(i)
      }
      if (num > this.page) {
        num = arr.length - 1
      } else if (num < 0) {
        num = arr[0]
      }
      if (arr.indexOf(num) > -1) {
        this.isInner = false
        this.setCurrent(num)
      } else {
        this.isInner = true
      }
    }
  }
}
</script>

<style lang="scss" scope>
.pagination {
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  // margin: 30px -15px 0 0;
  margin: 30px 0;
  li {
    margin-right: 5px;
    padding: 5px 0px;
    cursor: pointer;
    color: $energized;
    input {
      width: 45px;
      min-height: inherit;
      margin: 0 5px;
      text-align: center;
      color: $energized;
      border: 1px solid $energized;
    }
    a {
      position: relative;
      color: $energized;
      padding: 0 10px;
      &.active {
        color: $energized01;
        font-size: 18px;
        font-style: oblique;
      }
    }
  }
  .disabled {
    a {
      color: $stable !important;
    }
    color: $stable !important;
    input {
      color: $stable !important;
      border: 1px solid $stable !important;
    }
  }
}
</style>
